<%@page import="cn.edu.pku.wxlib.adminuser.model.*" %>

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp" %>

<rapid:override name="head">
	<title>Adminuser维护</title>
	
	<script src="${ctx}/scripts/rest.js" ></script>
	<link href="<c:url value="/widgets/simpletable/simpletable.css"/>" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="<c:url value="/widgets/simpletable/simpletable.js"/>"></script>
	
	<link href="<c:url value="/widgets/bootstrap-switch.css"/>" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="<c:url value="/widgets/bootstrap-switch.js"/>"></script>
	
	<script type="text/javascript" >
		$(document).ready(function() {
			window.simpleTable = new SimpleTable('queryForm',${page.thisPageNumber},${page.pageSize},'${pageRequest.sortColumns}');
		});
	</script>
</rapid:override>

<rapid:override name="content">
	<form id="queryForm" name="queryForm" method="get" style="display: inline;">
	<div class=search>
		<fieldset>
			<table>
				<div class="form-group inline icon">
					<i class="icon-list"></i>	
					<input placeholder="请输入用户名" value="${query.adminName}" id="adminName" name="adminName" maxlength="10"  class="form-field"/>
					<br/>
				</div>
				<div class="form-group inline icon">
					<i class="icon-list"></i>	
					<input placeholder="请输入姓名" value="${query.name}" id="name" name="name" maxlength="32"  class="form-field"/>
					<br/>
				</div>
				<div class="form-group inline icon">
					<i class="icon-calendar"></i>	
					<input placeholder="出生年月日开始" type="text" value="${query.birthBegin}" id="birthBegin" name="birthBegin" class="form-field"  />
				</div>
					<strong>至</strong>
				<div class="form-group inline icon">
					<i class="icon-calendar"></i>
					<input placeholder="出生年月日结束" type="text" value="${query.birthEnd}"  id="birthEnd" name="birthEnd" class="form-field"   />
					<br/>
				</div>
				<div class="form-group inline icon">
					<select id="gender" name="gender" class="form-field">
					<option value="">性别</option>
                	<option value="1"
                		<c:if test="${query.gender==1}">selected="selected"</c:if>>男</option>
                	<option value="2"
                		<c:if test="${query.gender==2}">selected="selected"</c:if>>女</option>
					</select>
				</div>
				<div class="form-group inline">
					<select id="state" name="state" class="form-field">
                		<option value="">用户状态</option>
               			<option value="0"
               				<c:if test="${query.state==0}">selected="selected"</c:if>>禁用</option>
                		<option value="1"
                			<c:if test="${query.state==1}">selected="selected"</c:if>>启用</option>
            		</select>
				</div>
				<div class="form-group inline icon">
					<i class="icon-list"></i>	
					<input placeholder="请输入座机" value="${query.tel}" id="tel" name="tel" maxlength="12"  class="form-field"/>
					<br/>
				</div>
				<div class="form-group inline icon">
					<i class="icon-list"></i>	
					<input placeholder="请输入手机" value="${query.phone}" id="phone" name="phone" maxlength="11"  class="form-field"/>
					<br/>
				</div>
				<div class="form-group inline icon">
					<i class="icon-list"></i>	
					<input placeholder="请输入邮箱" value="${query.email}" id="email" name="email" maxlength="64"  class="form-field"/>
					<br/>
				</div>
				<div class="form-group inline icon">
					<i class="icon-calendar"></i>	
					<input placeholder="创建时间开始" type="text" value="${query.createTimeBegin}" id="createTimeBegin" name="createTimeBegin" class="form-field"  />
				</div>
					<strong>至</strong>
				<div class="form-group inline icon">
					<i class="icon-calendar"></i>	
					<input placeholder="创建时间结束" type="text" value="${query.createTimeEnd}"  id="createTimeEnd" name="createTimeEnd" class="form-field"   />
					<br/>
				</div>
				<div class="form-group inline icon search-btn" onclick="$('#queryForm').submit();" title="查询">
					<i class="icon-search"></i>
				</div>
			</table>
		</fieldset>
		<div class="handleControl">
			<button type="button" class="btn btn-default" onclick="window.location = '${ctx}/adminuser/new'">新增</button>
<%-- 			<button type="button" class="btn btn-default" onclick="doRestBatchDelete('${ctx}/adminuser','items',document.forms.queryForm)">删除</button> --%>
<%-- 			<button type="button" class="btn btn-default" onclick="window.location = '${ctx}/admintorole'">用户角色管理</button> --%>
		<div>
	</div>
	
	<div class="gridTable">	
		<table width="100%"  border="0" cellspacing="0" class="table text-center">
		  <thead>			  
			  <tr>
				<th style="width:1px;"><input type="checkbox" onclick="setAllCheckboxState('items',this.checked)"></th>
				<th sortColumn="adminName" >用户名</th>
<!-- 				<th sortColumn="password" >密码</th> -->
				<th sortColumn="name" >姓名</th>
				<th sortColumn="birth" >出生年月</th>
				<th sortColumn="gender" >性别</th>
				<th sortColumn="tel" >座机</th>
				<th sortColumn="phone" >手机</th>
				<th sortColumn="email" >邮箱</th>
				<th sortColumn="createTime" >创建时间</th>
				<th sortColumn="state" >状态</th>
				<th sortColumn="roles" >角色</th>
				<th style="white-space:nowrap;">操作</th>
			  </tr>			  
		  </thead>
		  <tbody>
		  	  <c:forEach items="${page.result}" var="item" varStatus="status">
			  <tr>
				<td><input type="checkbox" name="items" value="${item.adminId}"></td>
				<td><c:out value='${item.adminName}'/>&nbsp;</td>
<%-- 				<td><c:out value='${item.password}'/>&nbsp;</td> --%>
				<td><c:out value='${item.name}'/>&nbsp;</td>
				<td><c:out value='${item.birthString}'/>&nbsp;</td>
				<td><c:choose> 
						<c:when test="${item.gender eq 1}">男</c:when>
						<c:when test="${item.gender eq 2}">女</c:when>
				</c:choose></td>
				<td><c:out value='${item.tel}'/>&nbsp;</td>
				<td><c:out value='${item.phone}'/>&nbsp;</td>
				<td><c:out value='${item.email}'/>&nbsp;</td>
				<td><c:out value='${item.createTimeString}'/>&nbsp;</td>
<%-- 				<td><c:choose>  --%>
<%-- 						<c:when test="${item.state eq 1}">启用</c:when> --%>
<%-- 						<c:when test="${item.state eq 0}">禁用</c:when> --%>
<%-- 				</c:choose></td> --%>
				<td>
				<div class="switch switch-small">
    				<input type="checkbox" id="state_checkBox" name="state_checkBox" value='${item.adminId}'
    					<c:if test="${item.state eq 1}">checked</c:if> 
    					<c:if test="${item.state eq 0}">state="false"</c:if>/>
				</div>
				</td>
				<td><c:out value='${item.roles}'/>&nbsp;</td>
				<td>
<%-- 					<a href="${ctx}/admintorole/${item.adminId}">分配角色</a>&nbsp;&nbsp; --%>
					<a href="javascript:void(0);" onclick="assignRole('${ctx}/adminuser/'+${item.adminId}+'//listUnknownRoleByAdmin',${item.adminId},${item.adminName},'assign')">分配角色</a>
					<a href="javascript:void(0);" onclick="assignRole('${ctx}/adminuser/'+${item.adminId}+'/listRoleByAdmin',${item.adminId},${item.adminName},'delete')">查看角色</a>
					<a href="${ctx}/adminuser/${item.adminId}/edit">修改</a>&nbsp;&nbsp;
<%-- 					<a href="${ctx}/adminuser/${item.adminId}" onclick="doRestDelete(this,'你确认删除?');return false;">删除</a> --%>
				</td>
			  </tr>
			  
		  	  </c:forEach>
		  </tbody>
		</table>
	
		<simpletable:pageToolbar page="${page}">
		</simpletable:pageToolbar>
		
	</div>
	</form>
	
	<!-- 分配角色  -->
	<div class="modal fade" id="assignRoles">
  		<div class="modal-dialog">
    		<div class="modal-content">
      			<div class="modal-header">
        			<h4 class="modal-title"></h4>
      			</div>
      			<div class="modal-body">
        			<form id="assignRolesForm" class="form-horizontal" action="">
<!-- 						<div id="changePsdResult" class="alert alert-danger" style="display:none;" role="alert"></div> -->
<!-- 						<input type="hidden" name="page" value=""> -->
<!-- 						<div class="gridTable">	 -->
						<table id="assignRolesTable" width="100%"  border="0" cellspacing="0" class="table text-center">
							<thead>			  
						  	<tr>
								<th style="width:1px;"><input type="checkbox" onclick="setAllCheckboxState('roleItems',this.checked)"></th>
<!-- 								<th sortColumn="roleId" >角色Id</th> -->
								<th sortColumn="roleName" >角色名</th>
								<th sortColumn="description" >描述</th>
						  	</thead>
		 					<tbody>
<%-- 		 						 <c:forEach items="${assignRolesFormpage.result}" var="item"> --%>
<!-- 		 						 <tr> -->
<%-- 									<td><input type="checkbox" name="items" value="${item.roleId}"></td> --%>
<%-- 									<td><c:out value='${item.roleName}'/>&nbsp;</td> --%>
<%-- 									<td><c:out value='${item.description}'/>&nbsp;</td> --%>
<!-- 								 </tr> -->
<%-- 		 						 </c:forEach> --%>
		 					</tbody>
		 				</table>
<!-- 		 				</div> -->
		 				<div id="pagination"></div>
<%-- 		 				<simpletable:pageToolbar page="${assignRolesFormpage}"> --%>
<%-- 						</simpletable:pageToolbar> --%>
					</form>
      			</div>
      			<div class="modal-footer">
<!--       				<button type="button" class="btn btn-primary" onclick="assignRoles('roleItems',document.forms.assignRolesForm)">添加</button> -->
<!--         			<button type="button" class="btn btn-default" data-dismiss="modal">取消</button> -->
       			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</rapid:override>
<rapid:override name="script">
	<script>
	//初始化时间控件
	var picker1 = new Pikaday(
		    {
		        field: document.getElementById('birthBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker2 = new Pikaday(
		    {
		        field: document.getElementById('birthEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
	var picker3 = new Pikaday(
		    {
		        field: document.getElementById('createTimeBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker4 = new Pikaday(
		    {
		        field: document.getElementById('createTimeEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });

    //复选框
	function setAllCheckboxState(name,state) {
		var elms = document.getElementsByName(name);
		for(var i = 0; i < elms.length; i++) {
			elms[i].checked = state;
		}
	}
	//添加角色
	function assignRoles(checkboxName,form){
		if (!hasOneChecked(checkboxName)) {
			alert("请选择要添加的角色!");
			return;
		}
		if (confirm("你确认要添加?")) {
			var inputadminId = $("#inputadminId").val();
			var url = "${ctx}/adminuser/"+inputadminId+"/assignRoles";
			
			form.action = url;
			form.method = 'POST';
			
// 			var m = document.createElement("input");
// 			m.setAttribute("type", "hidden");
// 			m.setAttribute("name", "_method");
// 			m.setAttribute("value", "assign");
// 			form.appendChild(m);
			
			form.submit();
		}
	}

	//删除角色
	function deleteRoles(checkboxName,form){
		if (!hasOneChecked(checkboxName)) {
			alert("请选择要删除的角色!");
			return;
		}
		if (confirm("你确认要删除?")) {
			var inputadminId = $("#inputadminId").val();
			var url = "${ctx}/adminuser/"+inputadminId+"/deleteRoles";
			
			form.action = url;
			form.method = 'POST';
			form.submit();
		}
	}
	
	//分配角色modal
	function assignRole(url, adminId, adminName, flag){
// 		var url = "${ctx}/adminuser/"+adminId+"/listUnknownRoleByAdmin";
		var tbody = $('#assignRolesTable').find("tbody");
		var input_adminId = $("<input type='hidden' name='adminId' id='inputadminId' value='"+adminId+"'></td>");
		tbody.empty();
		$('#assignRolesForm').append(input_adminId);
		post(url, {}, function(data){
			$('#assignRoles').find("h4").text("分配角色给用户"+adminName);
			$.each(data.data, function(index,item){
				var tr = $("<tr></tr>");
				var td_checkbox = $("<td><input type='checkbox' name='roleItems' value='"+item.roleId+"'></td>");
				var td_roleName = $("<td>"+item.roleName+"</td>");
				var td_description = $("<td>"+item.description+"</td>");
				tr.append(td_checkbox);
				tr.append(td_roleName);
				tr.append(td_description);
				tbody.append(tr);
				});
			getPageNation($("#pagination"),data.total,data.pageNum,data.currentPage);

			var foot = $(".modal-footer");
			foot.empty();
			var str_roleItems = 'roleItems';
			var btn_assign = $("<button type='button' class='btn btn-primary' onclick=assignRoles('"+str_roleItems+"',document.forms.assignRolesForm)>添加</button>");	
			var btn_delete = $("<button type='button' class='btn btn-primary' onclick=deleteRoles('roleItems',document.forms.assignRolesForm)>删除</button>");
			var btn_cancel = $("<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>");
			if('assign'==flag)
				foot.append(btn_assign);
			else
				foot.append(btn_delete);
			foot.append(btn_cancel);
			$('#assignRoles').modal('toggle');
		});
		
// 		window.simpleTable = new SimpleTable('assignRolesForm',${page.thisPageNumber},${page.pageSize},'${pageRequest.sortColumns}');
// 		$('#assignRoles').find("h4").text("用户["+adminName+"]分配角色");
// 		$("#assignRoles").modal({
// 		    remote: link
// 		});
	}

	//bootstrap switch
	$("[name='state_checkBox']").bootstrapSwitch('onText','启用');
	$("[name='state_checkBox']").bootstrapSwitch('offText','禁用');
	$("input[type=checkbox][name='state_checkBox']").on('switchChange.bootstrapSwitch', function (event, state) {
		var adminId = this.value;		
		if ($(this).is(":focus") == false) 
			return;
// 		else
// 			document.getElementById("tel").value=adminId;
		if (state == true)
		{
			$(this).blur();
			if(confirm('确定执行启用操作？')){
				window.open("${ctx}/adminuser/"+adminId+"&1/changeState","_self");
			}
			else
				$(this).bootStrapSwitch('state', false);
		}
		if (state == false)
		{
			$(this).blur();
			if(confirm('确定执行禁用操作？')){
				window.open("${ctx}/adminuser/"+adminId+"&0/changeState","_self");
			}
			else
				$(this).bootstrapSwitch('state', true);
		}
	});
	</script>
</rapid:override>
<%@ include file="base.jsp" %>
